import React, {useEffect, useState} from 'react';
import {Button, ConfigProvider, Divider, List, Skeleton, Tabs} from "antd";
import GoodsCard from "../../components/GoodsCard";
import {useRequest} from "ahooks";
import {indexList, shopTjGoodsList, tjShopList} from "../../api";
import InfiniteScroll from "react-infinite-scroll-component";
import CompanyCard from "../../components/CompanyCard";


function Index(props) {
    const [page, setPage] = useState(1);
    const [hasMore, setHasMore] = useState(true);
    const [activeTabKey, setActiveTabKey] = useState("");
    // 分类信息
    const [tabList, setTabList] = useState([]);
    const {loading: indexListLoading, run: indexListRun} = useRequest(indexList, {
        manual: true,
        onSuccess: (result, params) => {
            setTabList([{
                key: '',
                label: '全部',
            }, ...result.data.psortList.map(item => ({key: item.id, label: item.sort_name}))])
            console.log(result.data.psortList)

        },
    });

    // 推荐厂家
    const [tjShopGoodsList, setTjShopGoodsList] = useState([]);
    const {loading: tjShopGoodsListLoading, run: tjShopGoodsListRun} = useRequest(shopTjGoodsList, {
        manual: true,
        onSuccess: (result, params) => {


            if (result.data.length > 0) {

                setTjShopGoodsList(state => [...state, ...result.data])
                setPage(page + 1)
            } else {
                setHasMore(false)
            }
        },
    });

    useEffect(() => {
        indexListRun()
        tjShopGoodsListRun(1, "")
    }, [])

    const onChange = (key) => {
        setActiveTabKey(key)
        setPage(1)
        setHasMore(true)
        setTjShopGoodsList([])
        tjShopGoodsListRun(1, key)
    };

    const refresh = () => {
        setPage(1)
        setHasMore(true)
        setTjShopGoodsList([])
        tjShopGoodsListRun(1, activeTabKey)
    }
    return (
        <ConfigProvider
            theme={{
                token: {
                    colorPrimary: '#a21caf',
                },
            }}
        >
            <div>

                <Tabs activeKey={activeTabKey} items={tabList} onChange={onChange}/>
                <div
                    className="scrollable"
                    style={{
                        height: '86vh',
                        overflow: 'auto',
                        padding: '0 5px',
                        // border: '1px solid rgba(140, 140, 140, 0.1)',
                    }}
                >
                    <InfiniteScroll
                        dataLength={tjShopGoodsList.length}
                        next={() => tjShopGoodsListRun(page, activeTabKey)}
                        hasMore={hasMore}

                        loader={
                            <Skeleton

                                paragraph={{
                                    rows: 8,
                                }}
                                active
                            />
                        }
                        endMessage={<Divider plain>没有更多数据了 🤐</Divider>}
                        scrollableTarget="scrollableDiv"
                    >

                        <div className="mt-2 grid grid-cols-2  md:grid-cols-4">
                            {tjShopGoodsList.map(item => <div key={item} className="mt-3"><GoodsCard data={item}
                            ></GoodsCard></div>)}
                        </div>

                    </InfiniteScroll>
                </div>


            </div>
        </ConfigProvider>

    );
}

export default Index;